Search
#純靠北工程師5by
----------
請問什麼叫做「資深前端工程師」
之前有人對我說:「你看，這是var，這是欄位清空，這是抓id,抓name...這是css樣式，哈哈，你沒研究吼，哈哈哈...這就是資深前端工程師...哈哈」
我心理想「你是在表演耍猴子嗎，我剛進來資訊業的工作就是接觸JS原生，高中大學也接觸過前端」
只是後端的開發環境比前端開發環境較方便而已。
如果工作只要一種語言，我會優先選擇後端。
他真的好搞笑
----------
💖 純靠北官方 Discord 歡迎在這找到你的同溫層！
👉 https://discord.gg/tPhnrs2
----------
💖 全平台留言、文章詳細內容
👉 https://init.engineer/cards/show/6910
💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น HTML, CSS และ JavaScript แล้วเราอยากจะอยากไปลองใช้ Library หรือ Framework เจ๋ง ๆ ที่ช่วยในการเขียนเว็บ อย่าง React ต้องรู้อะไรบ้าง ??
.
👉 ซึ่งไอเจ้า React เนี่ยมันมีพื้นฐานจาก JavaScript นั่นเอง เราจึงจำเป็นต้องรู้ Concept ที่สำคัญ ๆ ก่อนจะไปใช้งานเจ้า React นั่นเอง
.
มีอะไรบ้าง?? ไปดูกันเลยจ้า 🔥
.
⚙️ Basic Data Structure
Data Structure เป็นหัวใจหลักในการเขียนโปรแกรม ดังนั้นเราต้องเรียนรู้ Data Structure ประเภทต่าง ๆ ให้เข้าใจก่อน ตัวอย่างเช่น การรับ-ส่ง Request จาก API มายัง JS เราก็ต้องมีวิธีที่จะจัดการกับโครงสร้างของข้อมูลที่ดึงมาจาก API เพื่อให้เราสามารถนำข้อมูลนั้นไปใช้ได้ตามต้องการ
.
🌟 DOM
DOM หรือ Document Object Model เป็นการปรับเปลี่ยนโครงสร้าง HTML ให้เป็นแบบ Object โดยให้ JavaScript สามารถจัดการกับ HTML ผ่านโครงสร้างของ DOM ได้นั่นเอง ซึ่งเจ้า React จะใช้โครงสร้าง DOM เป็นหลัก เพื่อสร้างการโต้ตอบบนหน้าเว็บที่สะดวกยิ่งขึ้น ตัวอย่างเช่น เมื่อคลิกปุ่มสามารถแสดงข้อความ หรือเปลี่ยนสีของข้อความนั่นเอง
.
🚚 API
API ย่อมาจาก Application Program Interface ซึ่งเราต้องมีพื้นฐานการใช้งาน API เพื่อนำข้อมูลมาใช้บนหน้าเว็บนั่นเอง อาจจะไม่ต้องถึงกับสร้าง API ใช้ก็ได้นะ เพียงแค่รู้โครงสร้าง และวิธีการดึงมาใช้งานพื้นฐานก็พอแล้ว !!
.
🔧 Axios / Fetch
เครื่องมือสำคัญที่ช่วยให้เราดึง API ต่าง ๆ มาใช้งานได้ง่ายมากขึ้นนั่นเอง !! ซึ่งเป็นสิ่งสำคัญมาก ๆ ในการพัฒนาหน้าเว็บ เพราะมันจะช่วยให้เราสามารถรับ-ส่งข้อมูลแบบไดมามิก และเชื่อมต่อระหว่าง Back-end ได้ง่าย
.
📚 ES6+
สิ่งสำคัญคือเราต้องเรียนรู้วิธีเขียน JavaScript มาตรฐานใหม่ ซึ่งจะช่วยให้โค้ดของเรามีรูปแบบที่อ่านง่ายมากขึ้น !! ซึ่งใน React ที่จะนิยมใช้ ได้แก่ Template Literals, Arrow Functions, Promise, Async / Await, const & let vs var และ Spread Operator นั่นเอง
.
🗂️ JS Array Methods
เมื่อเราสามารถดึงข้อมูลจาก API มาใช้ได้แล้วนั้น เราก็ต้องรู้จักวิธีจัดการกับข้อมูลนั้น ๆ ด้วยนะ ซึ่งมันจะง่ายขึ้นถ้าเรารู้จักใช้ความสามารถของ Array Methods ต่าง ๆ ซึ่งที่นิยมใช้กัน ได้แก่ map(), forEach(), find(), และ filter() เป็นต้น บอกเลยว่าถ้าใช้พวกนี้เป็น ทำให้ชีวิตง่ายขึ้นแน่นอน!! 5555
.
อะทั้งหมดนี้คือ Concept JavaScript พื้นฐานที่สำคัญที่คนเขียน React ต้องมีนะ หวังว่าเพื่อน ๆ จะชอบกันน้าาาา ใครมีอะไรเพิ่มเติมคอมเมนต์ไว้ได้เลย 🥰
.
📑 Source : https://lorenzejay.hashnode.dev/javascript-concepts-you-should-know-before-jumping-into-react-or-any-other-frontend-framework
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
ภาษาจาวาสคริปต์ ภาษาที่ชื่อเหมือนจาวาแต่คนะละตัว
ภาษาที่ดูเหมือนง่าย เพราะไวยากรณ์คล้ายภาษา C
แต่ถ้าศึกษาลึกๆ แล้ว
เป็นภาษาที่อินดี้
เข้าใจยากที่สุดภาษาหนึ่งก็ว่าได้
.
ตัวอย่างโค้ดในรูปซ้ายและขวา
หน้าตาเหมือนกัน ต่างกันนิดเดียวเอง
ถ้าเป็นภาษาอื่นก็คงรันได้เหมือนกัน
แหมก็โค้ดหน้าตายังกับแฝดอินจัน
.
แต่สำหรับจาวาสคริปต์ที่เป็นเด็กแนว
มันดันทำงานได้ไม่เหมือนกัน ซะงั้น
เพราะฝั่งซ้ายมือท่านผู้ชมรันไม่ผ่าน เกิด error
แต่ฝั่งขวามือทุกท่าน จะรันผ่านซะงั้น ...ปัดโธ่ ชีวิตรนทดเลย
.
.
สำหรับโค้ด 2 ชุดนี้มันมีรายละเอียดที่ซ้อนอยู่
แบบคาดไม่ถึง (แบบต้องอุทาน อ้าวเฮยมีงี้ด้วยเหรอ)
ต้องเซียนจริง เห็นน่าจะเข้าใจ
.
.
ขอเฉลย
ประโยค return จะมีการใส่ ; ให้อัตโนมัติ
จึงทำให้ประโยคถัดมามันเป็น { 'name': 'Somchai',
'age': 59
}
เจตนาประกาศอ๊อบเจ็กต์
แต่ตัวแปลภาษามันเห็นปีกกาลอยๆ ในบรรทัดหลัง return
เลยผิดไวยากรณ์
.
หมายเหตถ้าเราเพิ่ม
var a = { 'name': 'Somchai',
'age': 59
}
.
ก็จะรันผ่าน ไม่เกิด error
เพราะ getData() รีเทิร์น undefined ออกมา
.
.
.
.
.
สำหรับเงื่อนไขที่จาวาสคริปต์จะใส่ ; ให้อัตโนมัติมีดังนี้
1) เมื่อประโยคคำสั่งถัดไป เป็นคนละประโยคคำสั่ง ก็จะใส่ ; ปิดท้ายให้ หรือ ถ้าประโยคคำสั่งเขียนกระจายแยกหลายบรรทัด มันก็จะรู้และใส่ ; ปิดท้ายให้
2) เมื่อบรรทัดถัดไปเริ่มต้นด้วยเครื่องหมาย } ก็จะใส่ ; ต่อท้ายที่บล็อกใกล้ที่สุด
3) เมื่อสิ้นสุดไฟล์ในซอร์สโค้ด ก็จะใส่ ; ต่อท้ายสุดของไฟล์
4) เมื่อมีประโยคคำสั่ง return ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
5) เมื่อมีประโยคคำสั่ง break ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
6) เมื่อมีประโยคคำสั่ง throw ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
7) เมื่อมีประโยคคำสั่ง continue ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
📢 <ข่าวประชาสัมพันธ์/>
สำหรับหนังสือ JavaScript
ในตำนานเล่มตามลิงก์นี้ 👇
📘 https://www.se-ed.com/product/พัฒนาเว็บแอปพลิเคชั่นด้วย-JavaScript.aspx?no=9786160825394
.
ถ้าไปดูหน้าเว็บตอนนี้สินค้าหมดแล้ว
เนื่องจากพิมพ์มาจะ 5 ปีแล้วซินะ
จนตอนนี้ก็เหมือนคนแก่ ใกล้จะอำลาโลกนี้
เพราะใกล้หมดสต๊อกในแผงขายหนังสือเต็มทน
และทางซีเอ็ดไม่มีแผนจะตีพิมพ์ซ้ำอีกแล้ว (เศร้าใจจังเลย) 😭😰
.
.
แต่ก็ยังมีสินค้าเหลืออยู่ตามสาขาต่างๆ
สามารถคลิกไปสำรวจดูในแต่ละสาขา
แล้วไปซื้อที่สาขานั้นๆ ไม่ต้องผ่านเว็บ
(แต่เหลือน้อยเเต็มทน)
.
ด้วยเหตุนี้ผู้เขียนจึงรีบทำคลอดเล่มใหม่ ชื่อว่า
📕 "เสียดายไม่ได้อ่าน JavaScript"
.
แท้จริงแล้ว คือร่างกลับชาติมาเกิดใหม่
ของเล่มตำนานดังกล่าว
รีแบรนด์เปลี่ยนชื่อ
เปลี่ยนเนื้อหาข้างใน จากขาวดำ
ให้กลายเป็นมีสีสัน ดูดีมีชีวิตชีวา
พร้อมยัดอาหารสมอง เพิ่มเนื้อหา
แล้วก็อัปเดตยกเครื่องใหม่
.
แต่เนื่องจากถ้าอัปเดตใหม่หมดทั้งเล่ม
ผู้เขียนคงไม่มีเวลาว่างมากพอ
(เขียนไม่ทันพูดกันตรงๆ)
และคิดว่าอีกนานกว่าหลายชาติภพจะแล้วเสร็จ
.
จึงไม่อยากให้ผู้อ่านอดเสพความรู้ใหม่ๆ
เลยรีบทำคลอดให้กลับชาติมาเกิดใหม่ดีกว่า
โดยจำหน่ายเป็นทางอีบุ๊คก่อน
(ยังไม่มีเล่มกระดาษในตอนนี้ รอไปก่อน)
.
แล้วตัดสินใจปล่อยเนื้อหาออกมาเท่านี้ก่อน
เบื้องต้นก็เด็กๆ เอง
ก็แค่ 620 หน้า (≈ 142,638 คำ)
เดี๋ยวค่อยมาปรับปรุงหนังสือภายหลังทางอีบุ๊ค
เพราะมันอัปเดตง่ายดี
.
ให้นึกถึงซื้อโปรแกรมมา
แล้วสามารถอัปเดตเวอร์ชั่นประมาณนั้นแหละ
เล่มอีบุ๊คนี้ก็เช่นกัน อัปเดตให้ครับ
.
ดังนั้นๆ ถ้าเพื่อนๆ อุดหนุนกันแล้ว
อย่าลืมกดซิงก์ เนื้อหาล่าสุดด้วยละ
จะได้อ่านอะไรใหม่ๆ สดๆ อยู่เสมอ
สามารถอัปเดตหนังสือได้ฟรี ไม่เสียเงินแต่ประการใด
.
.
ต้องบอกอย่างนี้ว่า
ในแวดวงการเขียนโปรแกรม ภาษาอย่าง JavaScript
บางคนอาจสับสนกับภาษา Java ชื่อคล้ายกันก็จริงแต่คนละภาษา
ไม่ต่างกับ เมืองไทยประกันชีวิต กับ ไทยประกันชีวิต
ที่บางคนอาจหลงเข้าใจผิดมานานหลายปี
ว่าคือบริษัทเดียวกัน (จริงๆ แล้วไม่ใช่เลย)
.
ไม่เพียงเท่านั้นบางคนอาจคิดว่า ภาษา JavaScript
ทำงานแค่ฝั่ง front-end หรือฝั่งเว็บบราวเซอร์เท่านั้น
(ทำงานควบคู่กับภาษา HTML, CSS)
.
แต่เอาเข้าจริงๆ แล้ว จักรวาลของภาษานี้มันกว้างใหญ่มาก
- เพราะปัจจุบันสามารถนำไปเขียนโปรแกรมฝั่ง back-end ก็ได้ (เช่น ใช้ Node.js รัน JavaScript โดยปราศจากเว็บบราวเซอร์)
- หรือจะนำไปเขียนแอพฯ บนมือถือ (ใช้งานร่วมกับ HTML, CSS)
- หรือจะนำไปใช้งาน Robotics และ IoT (Internet of Things) ก็ได้
- หรือใช้เขียน AI (ปัญญาประดิษฐ์)
- และใช้ทำอย่างอื่น (ตอนนี้ยังนึกไม่ออก)
.
เมื่อดูโครงสร้างของ JavaScript ดูเหมือนจะง่ายนะ
แต่ก็แฝงไว้ด้วยความอินดี้ และลึกลับซ้อนเร้น
จนคนไม่เข้าใจมันมากที่สุด ภาษาหนึ่งในโลกก็ว่าได้
...ประมาณเขียนเสร็จแล้วทิ้งไว้เป็นเดือน พอกลับมาอ่านโค้ดตัวเอง งงว่าฉันเขียนอะไรลงไป
.
ยิ่งถ้าพูดถึงมาตรฐานจาวาสคริปต์ ES6 (ECMAScript 2015)
ที่ออกมาเมื่อปี 2015 ถือว่าเปลี่ยนแปลงครั้งยิ่งใหญ่ในประวัติศาสตร์ของภาษานี้ก็ว่าได้
.
และยังเป็นรากฐานต่อยอดไปศึกษาเฟรมเวิร์ค/ไลบรารี่ ของภาษาตระกูล JavaScript หลายตัว
อาทิ Angular, React, Vue เป็นต้น
ก็สามารถทำได้ง่ายแหละ
.
ปัจจุบัน JavaScript มันก็ออกมาตรฐานใหม่มาเรื่อย ๆ ให้คนหายคิดถึง ดังนี้ (หรืออาจบ่นว่าออกมาทำไมถี่จัง!!)
-ES7 (ECMAScript 2016) ออกมาเมือปี 2016
-ES8 (ECMAScript 2017) ออกมาเมือปี 2017
-ES9 (ECMAScript 2018) ออกมาเมือปี 2018
-ES10 (ECMAScript 2019) ออกมาเมือปี 2019
-ES11 (ECMAScript 2020) ออกมาเมือปี 2020
-ES12 (ECMAScript 2021) ออกมาเมือปี 2021
.
เมือถึงตอนนี้ ไม่ต้องซีเรียสนะครับ ว่าจะเรียนรู้ JavaScript ไม่ทัน
เพราะเวอร์ชั่นหลัง มันอัปเกรตทีละเล็กทีละน้อย
แต่ ES6 คือจุดเปลี่ยนสำคัญ
ถ้าเริ่มศึกษาจาวาสคริปต์ยุคใหม่ก็เริ่มตั้งแต่ ES6 ขึ้นไปเลย
เอาเป็นว่าหัวใจหลักของภาษานี้ยุคใหม่ ขอขีดเส้นใต้ไว้ตรงนี้ว่า
คือมาตรฐาน ES6 ใช้หางาน หาเงินได้จริงในยุคนี้
.
ขอบอกก่อน เนื้อหา ES6 มันเยอะมากๆๆๆ
ถ้าใครเคยเรียน JavaScript แบบเก่าอาจรู้สึกว่า ช่างไม่คุ้นเคยกับมาตรฐานใหม่เสียจริง
... จนรู้สึกว่าสิ่งที่เคยศึกษามาใน JavaScript แบบเดิมมา มันหมดอายุไปแล้ว
... อารมณ์ ES6 เป็นเหมือนซุปเปอร์เซตของ ES5 (มาตรฐานตัวเก่า) อีกที
(ถ้าใครดูการ์ตูนดราก้อนบอล ก็ให้คิดว่า ES6 มันคือร่างซุปเปอร์ไซย่าแล้วกันนะ)
.
ผู้เขียนเลยรังสรรค์สร้างผลงาน
เป็นหนังสือ "เสียดายไม่ได้อ่าน JavaScript"
เนื้อหาเล่มนี้หนักไปทาง JavaScript ล้วนๆ
จะไม่กล่าวถึง HTML, CSS เท่าไรนัก
หากใครซื้อไป หมายมั่นว่าจะเอาไปดูตัวอย่างเขียนเว็บไซต์
อาจผิดหวังนิดหนึ่ง
...เพราะเล่มนี้เน้นที่ไวยากรณ์ของ ES6 ขึ้นไป เป็นหลัก
.
+++++หนังสือเล่มนี้เหมาะกับใคร ++++++++.
1) คนที่เขียนเว็บอยู่แล้วด้วยภาษา HTML, CSS, JavaScript
2) คนที่ใช้ภาษา JavaScript ฝั่ง back-end รันโดยไม่ง้อเว็บบราเซอร์
3) คนที่ใช้เฟรมเวิร์ค/ไลบรารี่ ของภาษา JavaScript เช่น Angular, React, Vue เป็นต้น
4) คนที่ใช้ HTML, CSS, JavaScript เขียนแอพบนมือถือ
5) คนที่สนใจนำ JavaScript ไปใช้งาน Robotics และ IoT (Internet of Things)
6) คนที่น่าตาดี และชอบซื้อเอาไปนอนหนุน ...เฮยไม่ช่าย แซวเล่นครับ เหมาะกับคนที่เรียนด้านคอมฯ หรือสนใจเขียนโปรแกรมทุกท่าน
.
ตอนนี้ยังไม่มีเล่มกระดาษขาย
อ่านเป็นแบบ ebook อย่างเดียว
(ไม่มี pdf แจก ปรินต์ออกมาไม่ได้)
.
สั่งซื้อได้ที่ลิงก์นี้
👉 https://www.mebmarket.com/web/index.php?action=BookDetails&data=YToyOntzOjc6InVzZXJfaWQiO3M6NzoiMTcyNTQ4MyI7czo3OiJib29rX2lkIjtzOjY6IjE1Njg1NCI7fQ
.
ตัวอย่างหนังสือ
https://drive.google.com/file/d/1Nu6DUFf0q1TPXXnp8KEyXliLS7QGPM2_/view
.
+++++ ราคา ++++++++
ถ้าซื้อผ่าน Web,Android ราคาปกติ 295 บาท
ถ้าซื้อผ่าน Apple ราคาปกติ $10.99(฿329)
.
วิธีการซื้อ
1) สมัครเป็นสมาชิกเว็บ www.mebmarket.com ก่อน
2) ดาวน์โหลดแอพของ meb ค้นหาชื่อ meb นี้แหละ
(ถ้าจะอ่านบน desktop ก็ดาวน์โหลดโปรแกรมาก่อน)
3) แล้วสั่งซื้อ โอนเงินก็ตามรายละเอียดที่เว็บแนะนำครับผม
4) จากนั้นก็ใช้โปรแกรม หรือแอพของ meb เปิดอ่านหนังสือครับผม
5) ถ้ามีปัญหาติดต่อทางทีม support@mebmarket.com เขาจะให้คำตอบคำผม
(พอดีฝากขายที่นี้ด้านเทคนิคพวกนี้ผมจะไม่รู้ครับ)
.
ถ้าเพื่อนๆ ที่อ่านหนังสือผ่านระบบ iOS
เวลาจะชำระเงิน ไม่ควรจ่ายผ่านบัตร
เพราะจะซื้อหนังสือแพงขึ้นครับ
.
แนะนำให้ชำระเงิน
- โดยให้เปิดเว็บ https://www.mebmarket.com
- แล้ว login ด้วย username เดียวกับที่เราใช้ใน app บน iOS
- หลังจากนั้นก็เลือกซื้อหนังสือปกติ
.
ซื้อเสร็จแล้วมันจะไปโผล่ใน app บน iOS
จากนั้นเพื่อนสามารถเข้าใช้งานด้วย username และ password อันเดียวกันกับหน้าเว็บเลยครับ
จะซื้อได้ในราคาที่เห็นตามเว็บนี้ (ไม่แพง)
.
.
สำหรับวิธีอ่านอีบุ๊กเล่มนี้
ก็ต้องเลือกโปรแกรม/แอพ ให้เหมาะกับระบบที่เราใช้อยู่
วิธีอ่านอีบุ๊กก็ตามลิงก์ต่อไปนี้
https://docs.google.com/document/d/e/2PACX-1vSI4hZgymHgbqhX3CA6anA_18wRy-iXU9oIlupUr-KwAWvJyxI9zdLrJcPUW77xz8lbvRFfW10747Oe/pub
.
✍ เขียนโดย โปรแกรมเมอร์ไทย thai programmer
Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers - GitHub - jhildenbiddle/css-vars-ponyfill: Client-side ... ... <看更多>
css var 在 CSS: 變數(Variables) | 伊果的沒人看筆記本 的推薦與評價
然而CSS 其實原生就有變數可以使用，大大地增加了改動時的方便性。用法上也相當簡單。 在CSS 宣告變數時，建議放在 :root 裡，並使用 --變數名 的 ... ... <看更多>